<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <button id="btn" >我是一个按钮</button>
    <script>
        /* 一. Document Object Model
         *   JS通过DOM来对HTML文档进行操作,只要理解了DOM就可以随心所欲的操作WEB页面了
        *      1.文档--就是整个html网页文档
        *      2.对象--表示将网页中的每一个部分都转换为一个对象
        *      3.模型--使用模型来表示对象之间的关系,我们方便获取对象
        * 二.节点Node 是构成我们网页的最基本的组成部分,网页中的每一部分都可以成为一个节点
        *       比如html标签 属性 文本 注释 整个文档都是一个即节点
        *       常见的节点分为四类
        *           1.文档节点 整个html文档
        *           2.元素节点 html文档中的html标签
        *           3.属性节点 元素的属性
        *           4.文本节点 html标签中的文本内容
        *         比如  <p id="pid">hello</p>
        *                nodeName     nodeType    nodeValue
        *     文档节点    #document      9            null
        *     元素节点    标签名         1            null
        *     属性节点    属性名         2         属性值
        *     文本节点    #text         3         文本内容
        *   浏览器提供的文档节点 对象是window属性
        * 三.事件 就是文档或者浏览器窗口中发生的一些特定的交互瞬间
        *       JS与HTML之间的交互是通过事件实现的,
        *       比如:点击按钮 鼠标移动 关闭窗口
        *       结构和行为耦合，不方便维护,不推荐使用
        *       可以为按钮的对应事件绑定处理函数的形式来响应事件，当事件被触发时,其对应的函数将会被调用
        *
        * */
        var btn=document.getElementById("btn");
        // btn.innerHTML="I am button";
        // console.log(btn);
        btn.onmousemove=function () {
        alert("鼠标移动了");
        }

    </script>
</body>
</html>